<template>
	<ElFormItem :label="props.label">
		<ElInput v-model="input_model" :placeholder="props.label"  @change="onchange" :readonly="props.readonly" />
	</ElFormItem>
</template>

<script lang="ts" setup>
import { ElFormItem, ElInput } from 'element-plus';
import { ref, watch, onMounted } from 'vue';

	const props=defineProps({
		pidentifier:String,
		identifier:String,
		label:String,
		required:Boolean,
		readonly:Boolean,
		value:[String, Number, Boolean], // 支持多种类型
		length:Number,
	})
	
	watch(
　　      () => (props.value),
　　      () => {
			// 确保转换为字符串类型
			input_model.value = String(props.value || '')
　　      },
　　  )
	
	const error=ref(false);
	const error_message=ref();
	const input_model=ref('');
	const emits = defineEmits(['onchange'])
	const onchange=()=>{
		validate();
		emits('onchange',{
			pidentifier:props.pidentifier,
			identifier:props.identifier,
			value:input_model.value
		})
	}
	
	const validate=()=>{
		if(props.required && input_model.value==''){
			error.value=true
			error_message.value=props.label+'必填.'
			return;
		}
		
		// if(props.length <  input_model.value.length){
		// 	error.value=true
		// 	error_message.value='字符输入超限制.'
		// 	return;
		// }
		error.value=false
		error_message.value=''
	}
	
	onMounted(() => {
		// 确保转换为字符串类型
		input_model.value = String(props?.value || '')
	});
</script>


<style scoped>
</style>